<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鞋城商品详情页</title>
		<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../jquery-weui-build/dist/css/jquery-weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/dist/lib/weui.css">
		<link rel="stylesheet" href="../jquery-weui-build/demos/css/demos.css">
		<link rel="stylesheet" href="../static/css/index.css">
		<style>
			body{background: #f5f5f5;}
		</style>
	</head>
	<body>
		<!--商品轮播开始-->
		<div class="swiper-container arctical_lunbo">
	      	<!-- Additional required wrapper -->
	      	<div class="swiper-wrapper">
		        <!-- Slides -->
		        <div class="swiper-slide"><img src="../static/images/banner1.jpg" /></div>
		        <div class="swiper-slide"><img src="../static/images/banner2.jpg" /></div>
		        <div class="swiper-slide"><img src="../static/images/banner1.jpg" /></div>
	      	</div>
	      	<!-- If we need pagination -->
	      	<div class="swiper-pagination"></div>
	    </div>
	    <P class="arc_title">赵浩亮的鲁花花生油非转基因压榨油包邮</p>
	    <p class="arc_price">￥152.00元</p>
	    <p class="arc_option">
	    	<span class="fl">已售73桶</span>
	    	<span class="fr">库存：773桶</span>
	    </p>
	    <p class="arc_option">免邮（偏远地区另算）</p>
	    <!--商品详情和商品评价-->
	    <div class="weui-tab arc_tab">
			<div class="arc_tabbar">
		  		<div class="weui-navbar">
				    <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
				      	商品详情
				    </a>
			    	<a class="weui-navbar__item" href="#tab2">
			      		商品评论
			    	</a>
		    	</div>
		  	</div>
		  	<div class="weui-tab__bd arc_tab__bd">
			    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
			      	<img src="../static/images/tejia.jpg">
			      	<p>赵浩亮的鲁花花生油非转基因压榨油包邮</P>
			      	<img src="../static/images/shop4.jpg">
			    </div>
			    <div id="tab2" class="weui-tab__bd-item">
			      	
			    </div>
		  	</div>
		</div>
		<!--商品详情页底部-->
		<div class="arc_footer">
			<ul>
				<li class="arc_item1">
					<a href="#">
						<img src="../static/images/arc1 (2).jpg"/>
						<P>客服</P>
					</a>
				</li>
				<li class="arc_item2">
					<a href="#">
						<img src="../static/images/arc1 (1).jpg"/>
						<P>店铺</P>
					</a>
				</li>
				<li class="arc_item3">
					<a href="#" class="as_cart">
						<P>加入购物车</P>
					</a>
				</li>
				<li class="arc_item4">
					<a href="#" class="as_buy">
						<P>立即购买</P>
					</a>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<!--购买商品时弹框-->
		<div class="arc_search">
			<div class="as_head">
				<img class="as_shopimg" src="../static/images/shop1.jpg">
				<div class="as_shoptit">
					<P class="as_title">商品标题商品标题商品标题题题题题题题题题题题题题题题</P>
					<P class="as_price">￥53元</P>
				</div>
				<div class="clear"></div>
			</div>
			<div class="as_shuxing">
				<p>容量：</p>
				<span class="on">100ml</span>
				<span>100ml</span>
				<span>100ml</span>
			</div>
			<div class="as_mun">
				<p>购买数量</p>
				<div>
					<a href="javascript:;" class="click" data-type="+">+</a>
	                <input type="number" class="number" value="1"/>
	                <a href="javascript:;" class="click" data-type="-">-</a>
                </div>
			</div>
			<div class="as_sub">
				<a href="#" class="as_cart">
					<P>加入购物车</P>
				</a>
				<a href="#" class="as_buy">
					<P>立即购买</P>
				</a>
			</div>
			<p class="as_close">x</p>
		</div>
	
	<script src="../jquery-weui-build/dist/lib/jquery-2.1.4.js"></script>
	<script src="../static/js/jquery.SuperSlide.2.1.js"></script>
	<script src="../jquery-weui-build/dist/js/jquery-weui.js"></script>
	<script src="../jquery-weui-build/dist/js/city-picker.js"></script>	
	<!--拓展组件-->
	
	<script type='text/javascript' src='../jquery-weui-build/dist/js/swiper.js' charset='utf-8'></script>
	<script type='text/javascript' src='../jquery-weui-build/dist/lib/fastclick.js' charset='utf-8'></script>
	<script>
		$(function(){
		    //详情页轮播
		   	$(".swiper-container").swiper({
			    loop: true,
			    autoplay: 3000
			});
			//点击关闭按钮关闭选择框
			$(".as_close").click(function(){
				$(".arc_search").hide(1000);
			});
			//点击加入购物车选择框弹出
			$(".as_cart").click(function(){
				$(".arc_search").show(1000);
			});
			//点击立即购买选择框弹出
			$(".as_buy").click(function(){
				$(".arc_search").show(1000);
			});
			
		})
    </script>
	</body>
</html>
